<template>
  <div class="export-container">
    <el-card class="export-card">
      <template #header>
        <div class="card-header">
          <span>大数据量Excel导出功能</span>
        </div>
      </template>
      
      <div class="export-content">
        <el-alert
          title="说明：此功能用于导出用户数据到Excel文件，支持大数据量导出。点击导出后，系统会在后台异步处理，处理完成后可下载文件。"
          type="info"
          show-icon
          :closable="false"
          class="export-info"
        />
        
        <div class="export-actions">
          <el-button 
            type="primary" 
            size="large"
            :loading="isExporting"
            @click="startExport"
          >
            <i class="el-icon-download"></i>
            开始导出用户数据
          </el-button>
        </div>
        
        <div v-if="showTaskStatus" class="task-status">
          <el-divider>导出任务状态</el-divider>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="任务ID">
              <template v-if="currentTask && currentTask.taskId">{{ currentTask.taskId }}</template>
              <template v-else>
                <el-skeleton :rows="1" animated />
              </template>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag :type="getStatusType(currentTask.status)">
                {{ getStatusText(currentTask.status) }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="总记录数">
              <template v-if="currentTask.totalCount === -1">计算中...</template>
              <template v-else>{{ currentTask.totalCount || 0 }}</template>
            </el-descriptions-item>
            <el-descriptions-item label="已处理数">{{ currentTask.processedCount || 0 }}</el-descriptions-item>
            <el-descriptions-item label="完成进度">
              <div v-if="currentTask.totalCount === -1">
                <el-progress 
                  :percentage="0" 
                  status="info"
                />
                <span class="progress-text">正在准备数据...</span>
              </div>
              <!-- 添加调试日志 -->
              <div v-else-if="currentTask.totalCount && currentTask.totalCount > 0">
                <div style="display: none;">{{ console.log('进度条渲染条件满足：totalCount=' + currentTask.totalCount) }}</div>
                <el-progress 
                  :percentage="getProgressPercentage()" 
                  :status="getProgressStatus()"
                />
              </div>
              <span v-else-if="currentTask.status === 'PROCESSING'">处理中...</span>
              <span v-else-if="currentTask.status === 'WAITING'">等待处理...</span>
            </el-descriptions-item>
            <el-descriptions-item v-if="currentTask.errorMessage" label="错误信息" type="danger">
              {{ currentTask.errorMessage }}
            </el-descriptions-item>
          </el-descriptions>
          
          <div v-if="currentTask && currentTask.status === 'COMPLETED'" class="download-section">
            <el-button 
              type="success" 
              size="small"
              @click="downloadFile"
            >
              <i class="el-icon-document"></i>
              下载Excel文件
            </el-button>
          </div>
          
          <div v-if="currentTask && currentTask.status === 'FAILED'" class="retry-section">
            <el-button 
              type="warning" 
              size="small"
              @click="startExport"
            >
              <i class="el-icon-refresh"></i>
              重新导出
            </el-button>
          </div>
          
          <!-- 加载动画，提供更好的视觉反馈 -->
          <div v-if="currentTask && currentTask.status === 'WAITING' && !currentTask.taskId" class="loading-section">
            <el-row type="flex" justify="center" align="middle">
              <el-col>
                <el-loading type="spinner" text="正在准备导出任务..." />
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ExportPage',
  data() {
    return {
      isExporting: false,
      currentTask: null,
      statusCheckTimer: null,
      initialCheckInterval: 300, // 进一步缩短初始检查间隔，提高响应速度
      normalCheckInterval: 1000, // 缩短正常检查间隔，确保更及时更新进度
      checkInterval: 300, // 当前使用的检查间隔
      initialCheckCount: 0,
      maxInitialChecks: 15, // 增加更多的快速检查次数
      showTaskStatus: false // 控制任务状态区域显示
    }
  },
  
  computed: {
    // 计算属性，用于获取当前任务状态文本
    currentTaskStatusText() {
      if (!this.currentTask) return '准备中...';
      return this.getStatusText(this.currentTask.status);
    }
  },
  
  methods: {
    // 开始导出
    async startExport() {
      debugger
      console.log('开始导出用户数据')
      this.isExporting = true
      // 立即显示任务状态区域，提供即时视觉反馈
      this.showTaskStatus = true
      
      // 创建临时任务对象，立即显示进度UI
      this.currentTask = {
        status: 'WAITING',
        totalCount: -1,
        processedCount: 0,
        errorMessage: null
      }
      
      try {
        // 显示用户友好的消息
        this.$message.info('正在创建导出任务...')
        
        // 由于main.js中的响应拦截器已经返回了response.data
        // 所以这里直接使用response，不需要再访问response.data
        const response = await this.$axios.post('/api/export/users')
        
        // 更新任务对象
        this.currentTask = {
          taskId: response.taskId,
          status: 'WAITING',
          totalCount: -1, // 表示正在计算总数
          processedCount: 0,
          errorMessage: null
        }
        
        // 重置状态检查参数
        this.checkInterval = this.initialCheckInterval
        this.initialCheckCount = 0
        
        this.$message.success(response.message)
        // 立即开始状态检查
        console.log('开始状态检查')
        this.startStatusCheck(response.taskId)
      } catch (error) {
        // 更详细的错误处理
        let errorMsg = '启动导出任务失败'
        if (error.message && error.message.includes('timeout')) {
          errorMsg = '请求超时，请检查网络连接或稍后重试'
        } else if (error.message && error.message.includes('Network Error')) {
          errorMsg = '网络连接失败，请检查网络设置'
        } else {
          errorMsg = '启动导出任务失败，请重试'
        }
        
        // 更新任务状态为失败
        if (this.currentTask) {
          this.currentTask.status = 'FAILED'
          this.currentTask.errorMessage = errorMsg
        }
        
        this.$message.error(errorMsg)
        console.error('导出任务启动失败:', error)
      } finally {
        this.isExporting = false
      }
    },
    
    // 开始检查任务状态
    startStatusCheck(taskId) {
      debugger
      // 清除之前的定时器
      if (this.statusCheckTimer) {
        clearInterval(this.statusCheckTimer)
      }
      
      // 设置重试计数器和最大重试次数
      let retryCount = 0
      const maxRetries = 3
      // 记录上次进度，用于检测变化
      let lastProgress = 0
      
      // 设置新的定时器
      this.statusCheckTimer = setInterval(async () => {
        // 优化：动态调整检查间隔
        if (this.initialCheckCount < this.maxInitialChecks) {
          this.initialCheckCount++
          console.log(`进行第${this.initialCheckCount}次快速状态检查，任务ID: ${taskId}`)
        } else if (this.checkInterval !== this.normalCheckInterval) {
          // 切换到正常检查间隔
          clearInterval(this.statusCheckTimer)
          this.checkInterval = this.normalCheckInterval
          console.log(`切换到正常检查间隔: ${this.normalCheckInterval}ms`)
          this.startStatusCheck(taskId)
          return
        }
        
        try {
          console.log(`获取任务状态，任务ID: ${taskId}`)
          // 由于main.js中的响应拦截器已经返回了response.data
          // 所以这里直接使用response作为task数据
          console.log('开始获取任务状态/api/export/task')
          const task = await this.$axios.get(`/api/export/task/${taskId}`)
          // 重置重试计数
          retryCount = 0
          
          console.log('获取到任务状态:', {
            status: task.status,
            totalCount: task.totalCount,
            processedCount: task.processedCount
          })
          
          // 更新当前任务数据
          console.log('更新任务数据前的currentTask:', this.currentTask)
          this.currentTask = task
          console.log('更新任务数据后:', { status: task.status, totalCount: task.totalCount, processedCount: task.processedCount })
          
          // 检测进度变化，提供用户反馈
          if (task.totalCount && task.totalCount > 0 && task.processedCount > lastProgress) {
            const progressPercent = Math.round((task.processedCount / task.totalCount) * 100)
            console.log(`进度更新: ${task.processedCount}/${task.totalCount} (${progressPercent}%)`)
            lastProgress = task.processedCount
          } else if (!task.totalCount || task.totalCount <= 0) {
            console.log('totalCount无效或为0:', task.totalCount)
          } else if (task.processedCount <= lastProgress) {
            console.log('进度未变化:', task.processedCount, '<=', lastProgress)
          }
          
          // 如果任务已完成或失败，停止检查
          if (this.currentTask.status === 'COMPLETED' || this.currentTask.status === 'FAILED') {
            clearInterval(this.statusCheckTimer)
            this.statusCheckTimer = null
            console.log(`任务${this.currentTask.status === 'COMPLETED' ? '已完成' : '失败'}，停止状态检查`)
            
            // 如果任务失败，显示错误消息
            if (this.currentTask.status === 'FAILED') {
              this.$message.error('导出任务失败: ' + (this.currentTask.errorMessage || '未知错误'))
            }
          }
        } catch (error) {
          retryCount++
          console.error(`获取任务状态失败 (第${retryCount}次):`, error)
          
          // 如果连续失败次数达到最大值，停止定时器并提示用户
          if (retryCount >= maxRetries) {
            clearInterval(this.statusCheckTimer)
            this.statusCheckTimer = null
            this.$message.warning('获取任务状态失败，将停止自动检查。您可以手动刷新页面重新查询。')
            
            // 更新任务状态为失败
            if (this.currentTask) {
              this.currentTask.status = 'FAILED'
              this.currentTask.errorMessage = '网络连接失败，无法获取任务状态'
            }
          }
        }
      }, this.checkInterval)
    },
    
    // 下载文件
    downloadFile() {
      if (this.currentTask && this.currentTask.status === 'COMPLETED') {
        window.location.href = `/api/export/download/${this.currentTask.taskId}`
      }
    },
    
    // 获取状态对应的标签类型
    getStatusType(status) {
      const typeMap = {
        'WAITING': 'info',
        'PROCESSING': 'warning',
        'COMPLETED': 'success',
        'FAILED': 'danger'
      }
      return typeMap[status] || 'info'
    },
    
    // 获取状态文本
    getStatusText(status) {
      const textMap = {
        'WAITING': '等待处理',
        'PROCESSING': '处理中',
        'COMPLETED': '处理完成',
        'FAILED': '处理失败'
      }
      return textMap[status] || '未知状态'
    },
    
    // 获取进度百分比
    getProgressPercentage() {
      console.log('getProgressPercentage方法被调用:', this.currentTask)
      if (!this.currentTask || !this.currentTask.totalCount || this.currentTask.totalCount <= 0) {
        console.log('条件不满足，返回0%')
        return 0
      }
      
      const percentage = Math.round((this.currentTask.processedCount / this.currentTask.totalCount) * 100)
      console.log(`计算进度百分比: ${percentage}%, processedCount=${this.currentTask.processedCount}, totalCount=${this.currentTask.totalCount}`)
      return percentage
    },
    
    // 获取进度条状态
    getProgressStatus() {
      if (!this.currentTask) return '';
      if (this.currentTask.status === 'COMPLETED') return 'success';
      if (this.currentTask.status === 'FAILED') return 'exception';
      return '';
    },
    
    // 组件销毁时清除定时器
    beforeDestroy() {
      if (this.statusCheckTimer) {
        clearInterval(this.statusCheckTimer)
        this.statusCheckTimer = null
      }
    },
  }
}
</script>

<style scoped>
.export-container {
  padding: 20px;
  height: 100%;
  background-color: #f5f7fa;
}

.export-card {
  max-width: 800px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.export-content {
  padding: 20px 0;
}

.export-info {
  margin-bottom: 20px;
}

.export-actions {
  margin-bottom: 30px;
  text-align: center;
}

.task-status {
      margin-top: 20px;
      animation: fadeIn 0.3s ease-in;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .loading-section {
      padding: 40px 0;
      text-align: center;
    }
    
    .progress-text {
      margin-left: 10px;
      color: #606266;
      font-size: 14px;
    }

.download-section,
.retry-section {
  margin-top: 20px;
  text-align: center;
}
</style>